<!--
  1.实现一个复合输入框，可以通过code查询带出数据
    1.1 如果是单条，直接赋值
    1.2 如果是多条，则弹出选择框，选择后赋值
    1.3 如果数据查询为空，那么弹出输入框，并且将这个查询的值赋值给查询表单
  2.弹出框中，增加一个表单项，可以通过code和name进行模糊查询，可以进行选择，然后将值通过sync同步给父组件，子组件watch这个值，更新内部输入框的值
-->
<template>
  <div>
    <div class="complex-input-wrapper">
      <el-input placeholder="请输入代码" v-model="innerValue" class="input-with-input" @input="innerValueChange">
        <template slot="append">
          <el-input v-model="innerText" placeholder="请输入名称">
          </el-input>
        </template>
        <i slot="prefix" class="el-input__icon el-icon-search" @click="getData(innerValue)"></i>
      </el-input>
    </div>
    <el-dialog
               title="查询结果"
               :visible.sync="showDialog"
               width="60%"
               center>
      <el-row style="text-align: center;margin: 10px 0 25px;">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" ref="searchForm">
          <el-form-item label="优惠券代码" prop="searchValue">
            <el-input v-model="searchForm.searchValue" placeholder="请输入代码"></el-input>
          </el-form-item>
          <el-form-item label="优惠券名称" prop="searchText">
            <el-input v-model="searchForm.searchText" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="resetForm('searchForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table :data="tableData">
        <el-table-column property="couponCode" label="优惠券代码" width=""></el-table-column>
        <el-table-column property="couponName" label="优惠券名称" width=""></el-table-column>
        <el-table-column property="couponType" label="优惠券类型">
          <template slot-scope="scope">
            <span v-if="scope.row.couponType === 'discount'">折扣券</span><span v-else>满减券</span>
          </template>
        </el-table-column>
        <el-table-column property="couponValue" label="优惠金额">
          <template slot-scope="scope">
            <span v-if="scope.row.couponType === 'discount'">{{ scope.row.couponValue }} 折</span><span
            v-else>{{ scope.row.couponValue }} 元</span>
          </template>
        </el-table-column>
        <el-table-column property="couponDesc" label="描述"></el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin:10px; text-align: center">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-sizes="[5, 10, 50]"
          :total="page.total"
          @size-change="sizeChange"
          @current-change="currentChange"
        >
        </el-pagination>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import {queryByPage} from '@/api/coupon'

export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 用于绑定input
      innerValue: '',
      innerText: '',
      debounce: null,
      showDialog: false,
      tableData: [],
      page: {
        pageNo: 1,
        pageSize: 5,
        total: 0
      },
      selChange: false,
      searchForm: {
        searchValue: '',
        searchText: '',
      }
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /**
     * 0.这里不要watch内部的值，否则会在选择table的数据后也调用后端，
     * 1.内部组件input输入内容后，调用后端查询，设置防抖
     * 2.如果值为空或者dialog处于显示状态，不调用后台
     * @param val
     */
    innerValueChange(val) {
      console.log('innerValueChange', val)
      if (!val || this.showDialog) {
        return;
      }
      this._debounce(() => this.getData(this.innerValue), 500)
    },
    // 改变页数
    sizeChange() {

    },
    // 改变页码
    currentChange() {

    },
    // 选择某行数据
    handleClick(row) {
      this.setData(row.couponCode, row.couponName)
      this.showDialog = false
    },
    _debounce(fn, delay) {
      if (this.debounce) {
        clearTimeout(this.debounce)
      }
      this.debounce = setTimeout(() => {
        fn()
      }, delay)
    },
    setData(value, text) {
      this.$emit('update:text', text)
      this.$emit('update:value', value)
      // 这里要手工为内部组件赋值，因为可能选择相同的值时，导致value没有改变，内部组件watch不到，不能更新
      this.innerText = text
      this.innerValue = value
    },
    search() {
      this.getData(this.searchForm.searchValue, this.searchForm.searchText)
    },
    getData(value, text) {
      const data = {
        "list": [],
        "pageNo": 1,
        "pageSize": 10,
        "queryEntity": {
          "couponCode": value,
          "couponDesc": "",
          "couponName": text
        },
        "total": 0
      }
      queryByPage(data)
        .then(res => {
          const {code, data, message} = res
          this.$message.success(message)
          if (code === 0 && data.list) {
            this.tableData = data.list
            this.total = data.total
            if (data.list.length === 1) {
              // 传递给外层，外层值改变，内部watch到更新内部的值
              // 没打开的情况赋值，否则交给用户选择
              if (!this.showDialog) this.setData(data.list[0].couponCode, data.list[0].couponName)
            } else if (data.list.length === 0) {
              this.searchForm.searchValue = this.innerValue
              this.showDialog = true
              // 无数据 清空表单内容
              this.setData('', '')
            } else {
              // 多条弹框
              this.showDialog = true
            }
          } else {
            this.tableData = []
            this.total = 0
            this.showDialog = true
          }
        })
    }
  },
  watch: {
    value(val) {
      console.log('watch value', val)
      this.innerValue = val
    },
    text(val) {
      console.log('watch text', val)
      this.innerText = val
    },
    showDialog(val) {
      if (!val) {
        this.$refs['searchForm'].resetFields()
      }
    }
  }
}
</script>

<style scoped lang="scss">

.complex-input-wrapper {
  ::v-deep .el-input-group__append {
    width: 60%;
  }

  ::v-deep input:first-child {
    width: 100%;
  }

  ::v-deep .input-with-input .el-input-group__append {
    background-color: #fff;
    padding: 0 !important;
    border: 0;
  }

  ::v-deep .el-form-item.is-error .el-input-group__append .el-input__inner, .el-form-item.is-error .el-input-group__prepend .el-input__inner {
    border-color: #F56C6C !important;
  }

}


</style>
